<template>
  <div
    class="widgets"
    v-html="val.value"
    :contenteditable="!!val.isEdit"
    @blur="(e) => updateText(e, val.uuid)"
    :style="{
      position:inpage?'relative':'absolute',
      left: val.rect.x + 'mm' ,
      top:  val.rect.y + 'mm',
      width: val.rect.width + 'mm',
      height: val.rect.height + 'mm',
      fontSize: val.font.size + 'mm',
      color: val.font.color,
      textAlign: val.font.valueAlign,
      fontWeight: (val.font.bold === 1 || val.font.bold === true) ? 'bold': 'normal',
      borderTop: borderTop,
      borderLeft: borderLeft,
      borderBottom: borderBottom,
      borderRight: borderRight,
    }"
  ></div>
</template>

<script>

import {getViewTypeByType, getTypeByViewType} from '../../utils/utils'
import viewMixins from "@/mixins/viewMixins";
const WIDGET_NAME = 'YL_TYPE_TEXT'

export default {
  mixins: [viewMixins],
  name: WIDGET_NAME,
  setting: {
    viewType: WIDGET_NAME,
    type: getTypeByViewType(WIDGET_NAME),
    isEdit: true,
    dragable: true, // 是否可拖拽
    resizable: true, // 尺寸是否可变
    value: '文本',
    rect: {
      x: 0,
      y: 0,
      width: 30,
      height: 5
    },
    font: {
      name: "",
      size: 4.5,
      color: '#000000',
      bold: false, // 1代表粗体，0代表非粗体
      tilt: false, // 1代表斜体，0代表非斜体
      underline: false, // 1代表有下划线，0代表无下划线
      strikethrough: false, // 1代表有删除线，0代表无删除线
      Alignment: 'left', // 对齐方式
      // ItemType: 0, // 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项
    },
    valueAlign: {
      xSite: 1,
      ySite: 1,
    },
    topLine: {
      lineType: 1,
      lineWidth: 0.1,
      color: ''
    },
    leftLine: {
      lineType: 1,
      lineWidth: 0.1,
      color: ''
    },
    bottomLine: {
      lineType: 1,
      lineWidth: 0.1,
      color: ''
    },
    rightLine: {
      lineType: 1,
      lineWidth: 0.1,
      color: ''
    },
  },
  props: [
    'val', // 文本对象
    'inpage'
  ],
  methods: {
    updateText(e, uuid) {
      let text = e.target.innerHTML
      this.$vptd.commit('updateData', {
        uuid: uuid,
        key: 'value',
        value: text,
      })
    },
  },
}
</script>

